<div
  [class]="'empty-page ' + conf().type"
  [class.large]="conf().large"
  [class.compact]="conf().compact"
>
  @if (!isLoading()) {
    <div class="icon-div">
      <ix-icon class="icon" [name]="getIcon()" [fullSize]="true"></ix-icon>
    </div>
  }

  @if (isLoading()) {
    <div>
      <mat-spinner [diameter]="40"></mat-spinner>
    </div>
  }

  @if (!isLoading()) {
    <div>
      @if (conf().title) {
        <h3 class="empty-title">{{ conf().title | translate }}</h3>
      }
      @if (conf().message && !conf().compact) {
        <p class="empty-message" [innerHTML]="conf().message | translate"></p>
      }

      <ng-content></ng-content>

      @if (conf().button && !conf().compact) {
        <button
          *ixRequiresRoles="requiredRoles()"
          mat-button
          class="empty-action"
          color="primary"
          [ixTest]="conf().button?.label"
          (click)="doAction()"
        >
          {{ conf().button.label }}
        </button>
      }
    </div>
  }
</div>
